<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <div :class="{ 'search-collapse': isCollapse }">
        <el-form-item label="组织架构" prop="orgId">
          <el-select
            v-model="queryParams.orgId"
            placeholder="请选择组织架构"
            clearable
            filterable
            size="small"
            style="width: 230px"
          >
            <el-option
              v-for="item in deptTreeOptions"
              :key="item.deptId"
              :label="item.label"
              :value="item.deptId"
            >
              {{ item.label }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单位类型" prop="orgType">
          <el-select v-model="queryParams.orgType" placeholder="请选择单位类型" clearable size="small">
            <el-option
              v-for="dict in dict.type.dept_type"
              :key="dict.dictValue"
              :value="dict.dictValue"
              :label="dict.dictLabel"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="系统名称" prop="systemName">
          <el-input
            v-model="queryParams.systemName"
            placeholder="请输入系统名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="系统级别" prop="systemLevel">
          <el-select
            v-model="queryParams.systemLevel"
            placeholder="请选择系统级别"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_level"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否定级" prop="isClassified">
          <el-select v-model="queryParams.isClassified" placeholder="请选择是否定级" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_is_dj"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否备案" prop="isFiled">
          <el-select v-model="queryParams.isFiled" placeholder="请选择是否备案" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_is_ba"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否已评测" prop="isEvaluated">
          <el-select v-model="queryParams.isEvaluated" placeholder="请选择是否已评测" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_is_pc"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="Number(dict.dictValue)"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否已评估" prop="isSecurityEvaluated">
          <el-select v-model="queryParams.isSecurityEvaluated" placeholder="请选择是否已开展商用密码应用安全性评估" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_is_security_pc"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="包含个人信息" prop="infoperson">
          <el-select v-model="queryParams.infoperson" placeholder="请选择是否包含个人信息" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_info_person"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部署位置" prop="deployLocation">
          <el-select v-model="queryParams.deployLocation" placeholder="请选择部署位置" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_jf_addr"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作系统" prop="osType">
          <el-select v-model="queryParams.osType" placeholder="请选择操作系统" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_xt"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中间件" prop="middlewareType">
          <el-select v-model="queryParams.middlewareType" placeholder="请选择中间件" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_zjj"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数据库" prop="databaseType">
          <el-select v-model="queryParams.databaseType" placeholder="请选择数据库" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_db"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="应用软件" prop="appProduct">
          <el-select v-model="queryParams.appProduct" placeholder="请选择应用软件" clearable size="small">
            <el-option
              v-for="dict in dict.type.sys_app"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系人" prop="contactPerson">
          <el-input
            v-model="queryParams.contactPerson"
            placeholder="请输入联系人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="开发单位" prop="developCompany">
          <el-input
            v-model="queryParams.developCompany"
            placeholder="请输入系统开发单位"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="运维单位" prop="maintainCompany">
          <el-input
            v-model="queryParams.maintainCompany"
            placeholder="请输入系统运维单位"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="text"
          size="mini"
          @click="toggleCollapse"
        >
          {{ isCollapse ? '展开' : '收起' }}
          <i :class="[isCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"/>
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['admin:asset:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['admin:asset:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['admin:asset:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['admin:asset:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['admin:asset:import']"
        >导入</el-button>
        <input
          ref="upload"
          type="file"
          accept=".xlsx, .xls"
          style="display: none"
          @change="handleFileUpload"
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleImportTemplate"
        >模板下载</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="assetList"
      @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange"
      ref="assetTable"
      row-key="assetId"
      :expand-row-keys="expandRowKeys"
      border
      resizable
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding: 0 20px;">
            <p v-if="props.row.gxLoading">加载中...</p>
            <p v-if="!props.row.gxList || props.row.gxList.length === 0">暂无数据</p>
            <el-table
              v-loading="props.row.gxLoading"
              :data="props.row.gxList"
              border
              style="width: 65%;"
              size="small"
              v-if="props.row.gxList && props.row.gxList.length > 0"
            >
              <el-table-column label="ID" prop="id" align="center" width="60" />
              <el-table-column label="访问途径" prop="accessMethodName" align="center" min-width="120">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.accessMethodName" placement="top">
                    <span>{{ scope.row.accessMethodName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="访问域名" prop="accessDomain" align="center" min-width="120">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.accessDomain" placement="top">
                    <span>{{ scope.row.accessDomain }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="访问IP地址" prop="accessIp" align="center" min-width="120">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.accessIp" placement="top">
                    <span>{{ scope.row.accessIp }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="本地开放端口" prop="localPort" align="center" width="100">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.localPort" placement="top">
                    <span>{{ scope.row.localPort }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="公网映射端口" prop="publicMappedPort" align="center" width="100">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.publicMappedPort" placement="top">
                    <span>{{ scope.row.publicMappedPort }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="服务器IP地址" prop="serverIp" align="center" min-width="120">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.serverIp" placement="top">
                    <span>{{ scope.row.serverIp }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="是否有效" prop="isActive" align="center" width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.isActive === 1 ? 'success' : 'info'">
                    {{ scope.row.isActive === 1 ? '是' : '否' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" align="center" width="150">
                <template slot-scope="scope">
                  <el-tooltip :content="parseTime(scope.row.createTime)" placement="top">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" prop="updateTime" align="center" width="150">
                <template slot-scope="scope">
                  <el-tooltip :content="parseTime(scope.row.updateTime)" placement="top">
                    <span>{{ parseTime(scope.row.updateTime) }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="资产ID" align="center" prop="assetId" v-if="columns[0].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.assetId" placement="top">
            <span>{{ scope.row.assetId }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="组织架构" align="center" prop="orgIdName" v-if="columns[1].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.orgIdName" placement="top">
            <span>{{ scope.row.orgIdName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="单位类型" align="center" prop="orgTypeName">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.orgTypeName" placement="top">
            <span>{{ scope.row.orgTypeName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统名称" align="center" prop="systemName" v-if="columns[3].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.systemName" placement="top">
            <span>{{ scope.row.systemName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统类型" align="center" prop="systemType" v-if="columns[4].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_type, scope.row.systemType)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_type, scope.row.systemType) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统用户数量" align="center" prop="userCount" v-if="columns[5].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.userCount" placement="top">
            <span>{{ scope.row.userCount }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统业务主管单位" align="center" prop="businessManager" v-if="columns[6].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.businessManager" placement="top">
            <span>{{ scope.row.businessManager }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统功能简介" align="center" prop="gnjj" v-if="columns[7].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.gnjj" placement="top">
            <span>{{ scope.row.gnjj }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否定级" align="center" prop="isClassified" v-if="columns[8].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_is_dj, scope.row.isClassified)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_is_dj, scope.row.isClassified) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统级别" align="center" prop="systemLevel" v-if="columns[9].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_level, scope.row.systemLevel)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_level, scope.row.systemLevel) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="业务信息安全等级" align="center" prop="businessSecurityLevel" v-if="columns[10].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_sc_level, scope.row.businessSecurityLevel)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_sc_level, scope.row.businessSecurityLevel) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统服务安全等级" align="center" prop="serviceSecurityLevel" v-if="columns[11].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_fw_level, scope.row.serviceSecurityLevel)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_fw_level, scope.row.serviceSecurityLevel) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否备案" align="center" prop="isFiled" v-if="columns[12].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_is_ba, scope.row.isFiled)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_is_ba, scope.row.isFiled) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="备案编号" align="center" prop="filingNumber" v-if="columns[13].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.filingNumber" placement="top">
            <span>{{ scope.row.filingNumber }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否已测评" align="center" prop="isEvaluated" v-if="columns[14].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_is_pc, scope.row.isEvaluated)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_is_pc, scope.row.isEvaluated) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="最近测评时间" align="center" prop="lastEvaluateTime" width="180" v-if="columns[15].visible">
        <template slot-scope="scope">
          <el-tooltip :content="parseTime(scope.row.lastEvaluateTime, '{y}-{m}-{d}')" placement="top">
            <span>{{ parseTime(scope.row.lastEvaluateTime, '{y}-{m}-{d}') }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="测评结论" align="center" prop="cpjl" v-if="columns[16].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.cpjl" placement="top">
            <span>{{ scope.row.cpjl }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否已开展商用密码应用安全性评估" align="center" prop="isSecurityEvaluated" v-if="columns[17].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_is_pwd, scope.row.isSecurityEvaluated)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_is_pwd, scope.row.isSecurityEvaluated) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="最近密评时间" align="center" prop="lastSecurityEvaluateTime" width="180" v-if="columns[18].visible">
        <template slot-scope="scope">
          <el-tooltip :content="parseTime(scope.row.lastSecurityEvaluateTime, '{y}-{m}-{d}')" placement="top">
            <span>{{ parseTime(scope.row.lastSecurityEvaluateTime, '{y}-{m}-{d}') }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统中是否包含个人信息" align="center" prop="infoperson" v-if="columns[19].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_info_person, scope.row.infoperson)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_info_person, scope.row.infoperson) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="信息类别" align="center" prop="infoType" v-if="columns[20].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getMultipleDictLabel(dict.type.sys_info_type, scope.row.infoType)" placement="top">
            <span>{{ getMultipleDictLabel(dict.type.sys_info_type, scope.row.infoType) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="个人信息数量" align="center" prop="personinfocount" v-if="columns[21].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.personinfocount" placement="top">
            <span>{{ scope.row.personinfocount }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="部署位置" align="center" prop="deployLocation" v-if="columns[22].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.deployLocation" placement="top">
            <span>{{ getDeployLocationLabel(scope.row.deployLocation) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="机房地址" align="center" prop="machineRoomAddress" v-if="columns[23].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.machineRoomAddress" placement="top">
            <span>{{ scope.row.machineRoomAddress }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="机房主管单位" align="center" prop="machineRoomManager" v-if="columns[24].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.machineRoomManager" placement="top">
            <span>{{ scope.row.machineRoomManager }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否已通过云计算服务安全评估" align="center" prop="isCloudEvaluated" v-if="columns[25].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getDictLabel(dict.type.sys_is_yun, scope.row.isCloudEvaluated)" placement="top">
            <span>{{ getDictLabel(dict.type.sys_is_yun, scope.row.isCloudEvaluated) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作系统" align="center" prop="osType" v-if="columns[26].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getMultipleDictLabelWithVersion(dict.type.sys_xt, scope.row.osType, scope.row.osVersion)" placement="top">
            <span>{{ getMultipleDictLabelWithVersion(dict.type.sys_xt, scope.row.osType, scope.row.osVersion) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="中间件" align="center" prop="middlewareType" v-if="columns[27].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getMultipleDictLabelWithVersion(dict.type.sys_zjj, scope.row.middlewareType, scope.row.middlewareVersion)" placement="top">
            <span>{{ getMultipleDictLabelWithVersion(dict.type.sys_zjj, scope.row.middlewareType, scope.row.middlewareVersion) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="数据库" align="center" prop="databaseType" v-if="columns[28].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getMultipleDictLabelWithVersion(dict.type.sys_db, scope.row.databaseType, scope.row.databaseVersion)" placement="top">
            <span>{{ getMultipleDictLabelWithVersion(dict.type.sys_db, scope.row.databaseType, scope.row.databaseVersion) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="应用软件" align="center" prop="appProduct" v-if="columns[29].visible">
        <template slot-scope="scope">
          <el-tooltip :content="getMultipleDictLabelWithVersion(dict.type.sys_app, scope.row.appProduct, scope.row.appVersion)" placement="top">
            <span>{{ getMultipleDictLabelWithVersion(dict.type.sys_app, scope.row.appProduct, scope.row.appVersion) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="联系人" align="center" prop="contactPerson" v-if="columns[30].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.contactPerson" placement="top">
            <span>{{ scope.row.contactPerson }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="办公电话" align="center" prop="officePhone" v-if="columns[31].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.officePhone" placement="top">
            <span>{{ scope.row.officePhone }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="mobilePhone" v-if="columns[32].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.mobilePhone" placement="top">
            <span>{{ scope.row.mobilePhone }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统开发单位" align="center" prop="developCompany" v-if="columns[33].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.developCompany" placement="top">
            <span>{{ scope.row.developCompany }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统运维单位" align="center" prop="maintainCompany" v-if="columns[34].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.maintainCompany" placement="top">
            <span>{{ scope.row.maintainCompany }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统年度运维经费(万元)" align="center" prop="xtnf" v-if="columns[35].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.xtnf" placement="top">
            <span>{{ scope.row.xtnf }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="系统年度网络安全经费(万元)" align="center" prop="xtjf" v-if="columns[36].visible">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.xtjf" placement="top">
            <span>{{ scope.row.xtjf }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
            <div class="operation-buttons">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['admin:asset:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['admin:asset:remove']"
          >删除</el-button>
            </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改资产信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail">
        <!-- 基本信息 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>单位信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="组织架构" prop="orgId">
                <el-select
                  v-model="form.orgId"
                  placeholder="请选择组织架构"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in deptTreeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.deptId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位类型" prop="orgType">
                <el-select v-model="form.orgType" placeholder="请选择单位类型" style="width: 100%">
                  <el-option
                    v-for="dict in dict.type.dept_type"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基础信息</span>
          </div>
          <el-row :gutter="20">

            <el-col :span="8">
              <el-form-item label="系统名称" prop="systemName">
                <el-input v-model="form.systemName" placeholder="请输入系统名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="系统类型" prop="systemType">
                <el-select v-model="form.systemType" placeholder="请选择系统类型" style="width: 100%">
                  <el-option
                    v-for="dict in dict.type.sys_type"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="系统用户数量" prop="userCount" >
                <el-input v-model="form.userCount" placeholder="请输入系统用户数量"/>
              </el-form-item>
            </el-col>


            <el-col :span="8">
              <el-form-item label="系统业务主管单位" label-width="150px" prop="businessManager">
                <el-input v-model="form.businessManager" placeholder="重要业务系统和移动应用程序，选择系统类型关联" />
              </el-form-item>
            </el-col>




            <el-col :span="20">
              <el-form-item label="系统功能简介" prop="gnjj">
                <el-input v-model="form.gnjj" type="textarea" placeholder="请输入系统功能简介" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>定级备案信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="是否定级" prop="isClassified" label-width="120px">
                <el-select v-model="form.isClassified" placeholder="请选择是否定级" class="fixed-width-select">
                  <el-option
                    v-for="dict in dict.type.sys_is_dj"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="Number(dict.dictValue)"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="系统级别" prop="systemLevel" label-width="120px">
                <el-select 
                  v-model="form.systemLevel" 
                  placeholder="请选择系统级别" 
                  class="fixed-width-select"
                  :disabled="form.isClassified === 2"
                >
                  <el-option
                    v-for="dict in dict.type.sys_level"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务信息安全等级" prop="businessSecurityLevel" label-width="140px">
                <el-select 
                  v-model="form.businessSecurityLevel" 
                  placeholder="请选择业务信息安全等级" 
                  class="fixed-width-select"
                  :disabled="form.isClassified === 2"
                >
                  <el-option
                    v-for="dict in dict.type.sys_sc_level"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="系统服务安全等级" prop="serviceSecurityLevel" label-width="140px">
                <el-select 
                  v-model="form.serviceSecurityLevel" 
                  placeholder="请选择系统服务安全等级" 
                  class="fixed-width-select"
                  :disabled="form.isClassified === 2"
                >
                  <el-option
                    v-for="dict in dict.type.sys_fw_level"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否备案" prop="isFiled" label-width="120px">
                <el-select 
                  v-model="form.isFiled" 
                  placeholder="请选择是否备案" 
                  class="fixed-width-select"
                  :disabled="form.isClassified === 2"
                >
                  <el-option
                    v-for="dict in dict.type.sys_is_ba"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备案编号" prop="filingNumber" label-width="120px">
                <el-input 
                  v-model="form.filingNumber" 
                  placeholder="请输入备案编号" 
                  :disabled="form.isClassified === 2"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>测评信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="是否已测评" prop="isEvaluated" label-width="120px">
                <el-select v-model="form.isEvaluated" placeholder="请选择是否已测评" class="fixed-width-select">
                  <el-option
                    v-for="dict in dict.type.sys_is_pc"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="Number(dict.dictValue)"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="最近测评时间" prop="lastEvaluateTime">
                <el-date-picker
                  v-model="form.lastEvaluateTime"
                  type="date"
                  placeholder="选择最近测评时间"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  :disabled="form.isEvaluated === 2">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="等级测评结论" prop="cpjl">
                <el-input 
                  v-model="form.cpjl" 
                  type="textarea" 
                  placeholder="等级测评报告（见测评报告）" 
                  :disabled="form.isEvaluated === 2"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否已开展商用密码应用安全性评估" prop="isSecurityEvaluated" label-width="250px">
                <el-select 
                  v-model="form.isSecurityEvaluated" 
                  placeholder="请选择是否已开展商用密码应用安全性评估" 
                  class="fixed-width-select"
                >
                  <el-option
                    v-for="dict in dict.type.sys_is_pwd"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="Number(dict.dictValue)"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最近密评时间" prop="lastSecurityEvaluateTime">
                <el-date-picker
                  v-model="form.lastSecurityEvaluateTime"
                  type="date"
                  placeholder="选择最近密评时间"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  :disabled="form.isSecurityEvaluated !== 1"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

        </el-card>
        <!-- 安全等级信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>数据信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="系统中是否包含个人信息" prop="infoperson" label-width="170px">
                <el-select v-model="form.infoperson" placeholder="请选择系统中是否包含个人信息" class="fixed-width-select">
                  <el-option
                    v-for="dict in dict.type.sys_info_person"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="Number(dict.dictValue)"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="信息类别" prop="infoType" label-width="120px">
                <el-select v-model="form.infoType" multiple placeholder="请选择信息类别" class="fixed-width-select" :disabled="form.infoperson !== 1">
                  <el-option
                    v-for="dict in dict.type.sys_info_type"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="个人信息数量" prop="personinfocount">
                <el-input v-model="form.personinfocount" type="number" min="0" placeholder="请输入个人信息数量" :disabled="form.infoperson !== 1" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>




        <!-- 机房信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>机房信息</span>
          </div>
          <el-row :gutter="20">

            <el-col :span="8">
              <el-form-item label="部署位置" prop="deployLocation">
                <el-select v-model="form.deployLocation" placeholder="请选择部署位置" style="width: 100%">
                  <el-option
                    v-for="dict in dict.type.sys_jf_addr"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span>{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机房地址" prop="machineRoomAddress">
                <el-input v-model="form.machineRoomAddress" placeholder="请输入机房地址" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机房主管单位" prop="machineRoomManager">
                <el-input v-model="form.machineRoomManager" placeholder="请输入机房主管单位名称" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="是否已通过云计算服务安全评估" label-width="220px" prop="isCloudEvaluated">
                <el-select v-model="form.isCloudEvaluated" placeholder="如果系统部署在第三方公司平台需要填写" style="width: 100%">
                  <el-option
                    v-for="dict in dict.type.sys_is_yun"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span>{{ dict.dictLabel }}</span>
                    <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 系统环境信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>服务器/软件等信息</span>
          </div>
          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>应用服务器资源配置</span>
            </div>
            <el-row :gutter="20">


              <!-- CPU和内存配置 -->
              <el-col :span="8">
                <el-form-item label="CPU核数" prop="appcpusize" :rules="[{ required: true, message: '请输入CPU核数', trigger: 'blur' }]">
                  <el-input v-model="form.appcpusize" placeholder="请输入CPU核数" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="硬盘容量" prop="appdisksize" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur' }]">
                  <el-input v-model="form.appdisksize" placeholder="请输入硬盘容量" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内存容量" prop="appnsize" :rules="[{ required: true, message: '请输入内存容量', trigger: 'blur' }]">
                  <el-input v-model="form.appnsize" placeholder="请输入内存容量" />
                </el-form-item>
              </el-col>
              <!-- 操作系统 -->
              <el-col :span="24">
                <el-form-item label="操作系统" label-width="120px" prop="osItems" :rules="[{ required: true, message: '请至少添加一个操作系统', trigger: 'change' }]">
                  <div v-for="(item, index) in form.osItems" :key="index" class="dynamic-item">
                    <el-row :gutter="20" type="flex" align="middle">
                      <el-col :span="8">
                        <el-form-item :prop="`osItems.${index}.type`" :rules="rules['osItems.0.type']">
                          <el-select v-model="form.osItems[index].type" placeholder="请选择操作系统" style="width: 100%">
                            <el-option
                              v-for="dict in dict.type.sys_xt"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"
                            >
                              <span>{{ dict.dictLabel }}</span>
                              <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                                <span class="custom-question-icon"></span>
                              </el-tooltip>
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item :prop="`osItems.${index}.version`" :rules="rules['osItems.0.version']">
                          <el-input v-model="form.osItems[index].version" placeholder="请输入版本号" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4" class="button-group">
                        <el-button type="primary" icon="el-icon-plus" circle @click="addOsItem" v-if="index === form.osItems.length - 1"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeOsItem(index)" v-if="form.osItems.length > 1"></el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>数据库服务器资源配置</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="CPU核数" prop="dbcpusize" :rules="[{ required: true, message: '请输入CPU核数', trigger: 'blur' }]">
                  <el-input v-model="form.dbcpusize" placeholder="请输入CPU核数" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="硬盘容量" prop="dbdisksize" :rules="[{ required: true, message: '请输入硬盘容量', trigger: 'blur' }]">
                  <el-input v-model="form.dbdisksize" placeholder="请输入硬盘容量" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内存容量" prop="dbnsize" :rules="[{ required: true, message: '请输入内存容量', trigger: 'blur' }]">
                  <el-input v-model="form.dbnsize" placeholder="请输入内存容量" />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="数据库" prop="databaseItems" :rules="[{ required: true, message: '请至少添加一个数据库', trigger: 'change' }]">
                  <div v-for="(item, index) in form.databaseItems" :key="index" class="dynamic-item">
                    <el-row :gutter="20" type="flex" align="middle">
                      <el-col :span="8">
                        <el-form-item :prop="`databaseItems.${index}.type`" :rules="rules['databaseItems.0.type']">
                          <el-select v-model="form.databaseItems[index].type" placeholder="请选择数据库" style="width: 100%">
                            <el-option
                              v-for="dict in dict.type.sys_db"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="String(dict.dictValue)"
                            >
                              <span>{{ dict.dictLabel }}</span>
                              <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                                <span class="custom-question-icon"></span>
                              </el-tooltip>
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item :prop="`databaseItems.${index}.version`" :rules="rules['databaseItems.0.version']">
                          <el-input v-model="form.databaseItems[index].version" placeholder="请输入版本号" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4" class="button-group">
                        <el-button type="primary" icon="el-icon-plus" circle @click="addDatabaseItem" v-if="index === form.databaseItems.length - 1"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeDatabaseItem(index)" v-if="form.databaseItems.length > 1"></el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-col>


            </el-row>
          </el-card>

          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>其他资源配置</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="中间件" prop="middlewareItems" :rules="[{ required: true, message: '请至少添加一个中间件', trigger: 'change' }]">
                  <div v-for="(item, index) in form.middlewareItems" :key="index" class="dynamic-item">
                    <el-row :gutter="20" type="flex" align="middle">
                      <el-col :span="8">
                        <el-form-item :prop="`middlewareItems.${index}.type`" :rules="rules['middlewareItems.0.type']">
                          <el-select v-model="form.middlewareItems[index].type" placeholder="请选择中间件" style="width: 100%">
                            <el-option
                              v-for="dict in dict.type.sys_zjj"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"
                            >
                              <span>{{ dict.dictLabel }}</span>
                              <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                                <span class="custom-question-icon"></span>
                              </el-tooltip>
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item :prop="`middlewareItems.${index}.version`" :rules="rules['middlewareItems.0.version']">
                          <el-input v-model="form.middlewareItems[index].version" placeholder="请输入版本号" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4" class="button-group">
                        <el-button type="primary" icon="el-icon-plus" circle @click="addMiddlewareItem" v-if="index === form.middlewareItems.length - 1"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeMiddlewareItem(index)" v-if="form.middlewareItems.length > 1"></el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="应用软件产品" prop="appItems" :rules="[{ required: true, message: '请至少添加一个应用软件产品', trigger: 'change' }]">
                  <div v-for="(item, index) in form.appItems" :key="index" class="dynamic-item">
                    <el-row :gutter="20" type="flex" align="middle">
                      <el-col :span="8">
                        <el-select v-model="form.appItems[index].type" placeholder="请选择应用软件产品" style="width: 100%" :rules="rules['appItems.0.type']">
                          <el-option
                            v-for="dict in dict.type.sys_app"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          >
                            <span>{{ dict.dictLabel }}</span>
                            <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                              <span class="custom-question-icon"></span>
                            </el-tooltip>
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="form.appItems[index].version" placeholder="请输入版本号" />
                      </el-col>
                      <el-col :span="4" class="button-group">
                        <el-button type="primary" icon="el-icon-plus" circle @click="addAppItem" v-if="index === form.appItems.length - 1"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="removeAppItem(index)" v-if="form.appItems.length > 1"></el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-card>

        <!-- 联系信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="联系人" prop="contactPerson">
                <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="办公电话" prop="officePhone">
                <el-input v-model="form.officePhone" placeholder="请输入办公电话" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="mobilePhone">
                <el-input v-model="form.mobilePhone" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
          </el-row>


        </el-card>


        <!-- 安全评估信息 -->
        <!-- <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>安全评估信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
            <el-form-item label="是否" prop="isSecurityEvaluated">
                <el-select v-model="form.isSecurityEvaluated" placeholder="请选择是否已开展商用密码应用安全性评估" class="fixed-width-select">
                  <el-option
                    v-for="dict in dict.type.sys_is_pwd"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  >
                    <span class="select-option-label">{{ dict.dictLabel }}</span>
                    <el-tooltip class="item" effect="dark" :content="dict.remark || '暂无说明'" placement="top">
                      <span class="custom-question-icon"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="系统用户数量" prop="userCount" >
                <el-input v-model="form.userCount" placeholder="请输入系统用户数量"/>
              </el-form-item>
            </el-col>




          </el-row>
        </el-card> -->
        <!-- 安全评估信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>其他信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="系统开发单位" prop="developCompany">
                <el-input v-model="form.developCompany" placeholder="请输入系统开发单位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="系统运维单位" prop="maintainCompany">
                <el-input v-model="form.maintainCompany" placeholder="请输入系统运维单位" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label-width="190px" label="系统年度运维经费(万元)" prop="xtnf" >
                <el-input v-model="form.xtnf" placeholder="请输入运维经费"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="200px" label="系统年度网络安全经费(万元)" prop="xtjf" >
                <el-input v-model="form.xtjf" placeholder="请输入安全经费"/>
              </el-form-item>
            </el-col>

          </el-row>
        </el-card>
        <!-- 主机信息 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>主机信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showHostInfo = !showHostInfo">
              {{ showHostInfo ? '收起' : '展开' }}
            </el-button>
          </div>
          <div v-if="showHostInfo">
            <div v-for="(host, index) in form.sysAssetGx" :key="index" class="host-item">
              <el-row :gutter="20">

                <el-col :span="22">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="访问途径" :prop="`sysAssetGx.${index}.accessMethod`" :rules="rules['sysAssetGx.0.accessMethod']">
                        <el-select v-model="host.accessMethod" placeholder="请选择访问途径" style="width: 100%">
                          <el-option
                            v-for="dict in dict.type.sys_acc_type"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          >
                            <span>{{ dict.dictLabel }}</span>
                            <el-tooltip v-if="dict.remark" class="item" effect="dark" :content="dict.remark" placement="top">
                              <span class="custom-question-icon"></span>
                            </el-tooltip>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="访问域名" :prop="`sysAssetGx.${index}.accessDomain`" :rules="rules['sysAssetGx.0.accessDomain']">
                        <el-input v-model="host.accessDomain" placeholder="请输入访问域名" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="访问IP地址" :prop="`sysAssetGx.${index}.accessIp`" :rules="rules['sysAssetGx.0.accessIp']">
                        <el-input v-model="host.accessIp" placeholder="请输入访问IP地址" />
                      </el-form-item>
                    </el-col>

                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="本地开放端口" :prop="`sysAssetGx.${index}.localPort`" :rules="rules['sysAssetGx.0.localPort']">
                        <el-input v-model="host.localPort" placeholder="请输入本地开放端口" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="公网映射端口" :prop="`sysAssetGx.${index}.publicMappedPort`">
                        <el-input v-model="host.publicMappedPort" placeholder="请输入公网映射服务端口" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="服务器IP地址" :prop="`sysAssetGx.${index}.serverIp`" :rules="rules['sysAssetGx.0.serverIp']">
                        <el-input v-model="host.serverIp" placeholder="请输入服务器IP地址" />
                      </el-form-item>
                    </el-col>

                  </el-row>

                  <!-- <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="是否有效" :prop="`sysAssetGx.${index}.isActive`">
                        <el-select v-model="host.isActive" placeholder="请选择是否有效" style="width: 100%">
                          <el-option label="是" value="1" />
                          <el-option label="否" value="0" />
                        </el-select>
                      </el-form-item>
                    </el-col>
            </el-row> -->

                </el-col>
                <el-col :span="2" class="host-operation">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeHostItem(index)" v-if="form.sysAssetGx.length > 1"></el-button>
                </el-col>
              </el-row>
              <el-divider v-if="index !== form.sysAssetGx.length - 1"></el-divider>
            </div>



            <el-row :gutter="20">
              <el-col :span="24" style="text-align: center">
                <el-button type="primary" icon="el-icon-plus" @click="addHostItem">添加主机信息</el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!isDetail">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加详情对话框 -->
    <el-dialog :title="'资产详情'" :visible.sync="detailOpen" width="1500px" append-to-body>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="组织架构">{{ detailForm.orgIdName }}</el-descriptions-item>
        <el-descriptions-item label="单位类型">{{ detailForm.orgTypeName }}</el-descriptions-item>
        <el-descriptions-item label="系统名称">{{ detailForm.systemName }}</el-descriptions-item>
        <el-descriptions-item label="系统类型">{{ detailForm.systemTypeName }}</el-descriptions-item>
        <el-descriptions-item label="信息类别">{{ detailForm.infoTypeName }}</el-descriptions-item>
        <el-descriptions-item label="是否定级">{{ detailForm.isClassifiedName }}</el-descriptions-item>
        <el-descriptions-item label="系统级别">{{ detailForm.systemLevelName }}</el-descriptions-item>
        <el-descriptions-item label="业务信息安全等级">{{ detailForm.businessSecurityLevelName }}</el-descriptions-item>
        <el-descriptions-item label="系统服务安全等级">{{ detailForm.serviceSecurityLevelName }}</el-descriptions-item>
        <el-descriptions-item label="是否备案">{{ detailForm.isFiledName }}</el-descriptions-item>
        <el-descriptions-item label="备案编号">{{ detailForm.filingNumber }}</el-descriptions-item>
        <el-descriptions-item label="是否已测评">{{ detailForm.isEvaluatedName }}</el-descriptions-item>
        <el-descriptions-item label="最近测评时间">{{ parseTime(detailForm.lastEvaluateTime, '{y}-{m}-{d}') }}</el-descriptions-item>
        <!-- 访问途径字段已移到主机信息中 -->
        <!-- <el-descriptions-item label="访问途径">{{ detailForm.accessMethod }}</el-descriptions-item> -->
        <el-descriptions-item label="部署位置">{{ getDeployLocationLabel(detailForm.deployLocation) }}</el-descriptions-item>
        <el-descriptions-item label="机房地址">{{ detailForm.machineRoomAddress }}</el-descriptions-item>
        <el-descriptions-item label="机房主管单位">{{ detailForm.machineRoomManager }}</el-descriptions-item>
        <el-descriptions-item label="操作系统">{{ detailForm.osTypeName }}</el-descriptions-item>
        <el-descriptions-item label="操作系统版本">{{ detailForm.osVersion }}</el-descriptions-item>
        <el-descriptions-item label="中间件">{{ detailForm.middlewareTypeName }}</el-descriptions-item>
        <el-descriptions-item label="中间件版本">{{ detailForm.middlewareVersion }}</el-descriptions-item>
        <el-descriptions-item label="数据库">{{ detailForm.databaseTypeName }}</el-descriptions-item>
        <el-descriptions-item label="数据库版本">{{ detailForm.databaseVersion }}</el-descriptions-item>
        <el-descriptions-item label="应用软件产品">{{ detailForm.appProductName }}</el-descriptions-item>
        <el-descriptions-item label="应用产品版本">{{ detailForm.appVersion }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ detailForm.contactPerson }}</el-descriptions-item>
        <el-descriptions-item label="办公电话">{{ detailForm.officePhone }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detailForm.mobilePhone }}</el-descriptions-item>
        <el-descriptions-item label="系统开发单位">{{ detailForm.developCompany }}</el-descriptions-item>
        <el-descriptions-item label="系统运维单位">{{ detailForm.maintainCompany }}</el-descriptions-item>
        <el-descriptions-item label="系统业务主管单位">{{ detailForm.businessManager }}</el-descriptions-item>
        <el-descriptions-item label="密码应用评估">{{ detailForm.isSecurityEvaluatedName }}</el-descriptions-item>
        <el-descriptions-item label="最近密评时间">{{ parseTime(detailForm.lastSecurityEvaluateTime, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="系统用户数量">{{ detailForm.userCount }}</el-descriptions-item>
        <el-descriptions-item label="是否已通过云计算服务安全评估">{{ detailForm.isCloudEvaluatedName }}</el-descriptions-item>
        <el-descriptions-item label="系统功能简介" :span="3">{{ detailForm.gnjj }}</el-descriptions-item>
      </el-descriptions>

      <div v-if="detailForm.sysAssetGx && detailForm.sysAssetGx.length > 0" style="margin-top: 20px;">
        <h3>主机信息</h3>
        <el-table :data="detailForm.sysAssetGx" border style="width: 100%">
          <el-table-column label="访问途径" prop="accessMethod" align="center" />
          <el-table-column label="访问域名" prop="accessDomain" align="center" />
          <el-table-column label="访问IP地址" prop="accessIp" align="center" />
          <el-table-column label="本地开放端口" prop="localPort" align="center" />
          <el-table-column label="公网映射端口" prop="publicMappedPort" align="center" />
          <el-table-column label="服务器IP地址" prop="serverIp" align="center" />
          <el-table-column label="是否有效" prop="isActive" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.isActive === 1 ? 'success' : 'info'">
                {{ scope.row.isActive === 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAsset, getAsset, delAsset, addAsset, updateAsset, importData } from "@/api/admin/asset";
import { listDept } from "@/api/system/dept";
import { getDicts } from "@/api/system/dict/data";
import { listGx } from "@/api/system/gx";

export default {
  name: "Asset",
  dicts: [
    "dept_type",
    "sys_level",
    "sys_type",
    "sys_info_type",
    "sys_is_dj",
    "sys_is_ba",
    "sys_is_pc",
    "sys_is_pwd",
    "sys_is_yun",
    "sys_info_person",
    "sys_jf_addr",
    "sys_xt",
    "sys_zjj",
    "sys_db",
    "sys_app",
    "sys_org_type"
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 显示主机信息
      showHostInfo: false,
      // 总条数
      total: 0,
      // 资产信息表格数据
      assetList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgId: null,
        orgType: null,
        systemName: null,
        systemLevel: null,
        isClassified: null,
        isFiled: null,
        isEvaluated: null,
        isSecurityEvaluated: null,
        infoperson: null,
        deployLocation: null,
        osType: null,
        middlewareType: null,
        databaseType: null,
        appProduct: null,
        contactPerson: null,
        developCompany: null,
        maintainCompany: null
      },
      // 表单参数
      form: {
        osItems: [{ type: '', version: '' }],
        middlewareItems: [{ type: '', version: '' }],
        databaseItems: [{ type: '', version: '' }],
        appItems: [{ type: '', version: '' }],
        assetId: null,
        orgId: null,
        orgType: null,
        systemName: null,
        systemType: null,
        infoType: [],
        infoperson: null,
        personinfocount: 0,
        isClassified: 0, // 默认为"否"
        systemLevel: null,
        businessSecurityLevel: null,
        serviceSecurityLevel: null,
        isFiled: null,
        filingNumber: null,
        isEvaluated: null,
        lastEvaluateTime: null,
        deployLocation: null,
        machineRoomAddress: null,
        machineRoomManager: null,
        osType: null,
        osVersion: null,
        middlewareType: null,
        middlewareVersion: null,
        databaseType: null,
        databaseVersion: null,
        appProduct: null,
        appVersion: null,
        contactPerson: null,
        officePhone: null,
        mobilePhone: null,
        developCompany: null,
        maintainCompany: null,
        businessManager: null,
        isSecurityEvaluated: null,
        lastSecurityEvaluateTime: null,
        userCount: null,
        isCloudEvaluated: null,
        status: "0",
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        cpjl: null,
        sysAssetGx: [{
          accessMethod: '',
          accessDomain: '',
          accessIp: '',
          localPort: '',
          publicMappedPort: '',
          serverIp: '',
          isActive: '1'
        }],
        appcpu: null,
        appdisksize: null,
        appnsize: null,
        dbcpu: null,
        dbdisksize: null,
        dbnsize: null,
        personinfocount: null, // 新增个人信息数量字段
      },
      // 表单校验
      rules: {
        orgId: [
          { required: true, message: "组织架构不能为空", trigger: "change" }
        ],
        orgType: [
          { required: true, message: "单位类型不能为空", trigger: "change" }
        ],
        systemName: [
          { required: true, message: "系统名称不能为空", trigger: "blur" }
        ],
        systemType: [
          { required: true, message: "系统类型不能为空", trigger: "change" }
        ],
        isClassified: [
          { required: true, message: "是否定级不能为空", trigger: "blur" }
        ],
        systemLevel: [
          { 
            required: true, 
            message: "系统级别不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isClassified === 2) {
                // 如果是否定级为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("系统级别不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        businessSecurityLevel: [
          { 
            required: true, 
            message: "业务信息安全等级不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isClassified === 2) {
                // 如果是否定级为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("业务信息安全等级不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        serviceSecurityLevel: [
          { 
            required: true, 
            message: "系统服务安全等级不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isClassified === 2) {
                // 如果是否定级为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("系统服务安全等级不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        isFiled: [
          { 
            required: true, 
            message: "是否备案不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isClassified === 2) {
                // 如果是否定级为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("是否备案不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        filingNumber: [
          { 
            required: true, 
            message: "备案编号不能为空", 
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (this.form.isClassified === 2) {
                // 如果是否定级为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("备案编号不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        isEvaluated: [
          { required: true, message: "是否已测评不能为空", trigger: "blur" }
        ],
        lastEvaluateTime: [
          { 
            required: true, 
            message: "最近测评时间不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isEvaluated === 2) {
                // 如果是否已测评为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("最近测评时间不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        cpjl: [
          { 
            required: true, 
            message: "测评结论不能为空", 
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (this.form.isEvaluated === 2) {
                // 如果是否已测评为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("等级测评结论不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        isSecurityEvaluated: [
          { 
            required: true, 
            message: "是否已开展商用密码应用安全性评估不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isEvaluated === 2) {
                // 如果是否已测评为"否"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("是否已开展商用密码应用安全性评估不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        lastSecurityEvaluateTime: [
          { 
            required: true, 
            message: "最近密评时间不能为空", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.isSecurityEvaluated !== 1) {
                // 如果是否已开展商用密码应用安全性评估不是"是"，则不验证
                callback();
              } else if (!value) {
                callback(new Error("最近密评时间不能为空"));
              } else {
                callback();
              }
            }
          }
        ],
        'sysAssetGx.0.accessMethod': [
          { required: true, message: "访问途径不能为空", trigger: "change" }
        ],
        deployLocation: [
          { required: true, message: "部署位置不能为空", trigger: "blur" }
        ],
        'osItems.0.type': [
          { required: true, message: '请选择操作系统', trigger: 'change' }
        ],
        'osItems.0.version': [
          { required: true, message: '请输入操作系统版本', trigger: 'blur' }
        ],
        contactPerson: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        officePhone: [
          { required: true, message: "办公电话不能为空", trigger: "blur" }
        ],
        mobilePhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" }
        ],
        developCompany: [
          { required: true, message: "系统开发单位不能为空", trigger: "blur" }
        ],
        maintainCompany: [
          { required: true, message: "系统运维单位不能为空", trigger: "blur" }
        ],
        businessManager: [
          { required: true, message: "系统业务主管单位不能为空", trigger: "blur" }
        ],
        userCount: [
          { required: true, message: "系统用户数量不能为空", trigger: "blur" }
        ],
        isCloudEvaluated: [
          { required: true, message: "是否已通过云计算服务安全评估不能为空", trigger: "blur" }
        ],
        gnjj: [
          { required: true, message: "系统功能简介不能为空", trigger: "blur" }
        ],
        machineRoomAddress: [
          { required: true, message: "机房地址不能为空", trigger: "blur" }
        ],

        'sysAssetGx.0.accessMethod': [
          { required: true, message: "访问途径不能为空", trigger: "blur" }
        ],
        'sysAssetGx.0.accessDomain': [
          { required: true, message: "访问域名不能为空", trigger: "blur" }
        ],
        'sysAssetGx.0.accessIp': [
          { required: true, message: "访问IP地址不能为空", trigger: "blur" }
        ],
        'sysAssetGx.0.localPort': [
          { required: true, message: "本地开放端口不能为空", trigger: "blur" }
        ],
        'sysAssetGx.0.serverIp': [
          { required: true, message: "服务器IP地址不能为空", trigger: "blur" }
        ]
      },
      // 部门列表
      deptOptions: [],
      // 处理后的部门列表（带有层级关系）
      deptTreeOptions: [],
      // 列信息 - 按照新增表单填写顺序重新排列
      columns: [
        { key: 0, label: `资产ID`, visible: true },
        { key: 1, label: `组织架构`, visible: true },
        { key: 2, label: `单位类型`, visible: true },
        { key: 3, label: `系统名称`, visible: true },
        { key: 4, label: `系统类型`, visible: true },
        { key: 5, label: `系统用户数量`, visible: true },
        { key: 6, label: `系统业务主管单位`, visible: true },
        { key: 7, label: `系统功能简介`, visible: true },
        { key: 8, label: `是否定级`, visible: true },
        { key: 9, label: `系统级别`, visible: true },
        { key: 10, label: `业务信息安全等级`, visible: true },
        { key: 11, label: `系统服务安全等级`, visible: true },
        { key: 12, label: `是否备案`, visible: true },
        { key: 13, label: `备案编号`, visible: true },
        { key: 14, label: `是否已测评`, visible: true },
        { key: 15, label: `最近测评时间`, visible: true },
        { key: 16, label: `测评结论`, visible: true },
        { key: 17, label: `是否已开展商用密码应用安全性评估`, visible: true },
        { key: 18, label: `最近密评时间`, visible: true },
        { key: 19, label: `系统中是否包含个人信息`, visible: true },
        { key: 20, label: `信息类别`, visible: true },
        { key: 21, label: `个人信息数量`, visible: true },
        { key: 22, label: `部署位置`, visible: true },
        { key: 23, label: `机房地址`, visible: true },
        { key: 24, label: `机房主管单位`, visible: true },
        { key: 25, label: `是否已通过云计算服务安全评估`, visible: true },
        { key: 26, label: `操作系统`, visible: true },
        { key: 27, label: `中间件`, visible: true },
        { key: 28, label: `数据库`, visible: true },
        { key: 29, label: `应用软件`, visible: true },
        { key: 30, label: `联系人`, visible: true },
        { key: 31, label: `办公电话`, visible: true },
        { key: 32, label: `手机号`, visible: true },
        { key: 33, label: `系统开发单位`, visible: true },
        { key: 34, label: `系统运维单位`, visible: true },
        { key: 35, label: `系统年度运维经费(万元)`, visible: true },
        { key: 36, label: `系统年度网络安全经费(万元)`, visible: true },
        { key: 37, label: `状态`, visible: true }
      ],
      // 字典数据
      dict: {
        type: {
          dept_type: [],
          sys_type: [],
          sys_is_dj: [],
          sys_level: [],
          sys_sc_level: [],
          sys_fw_level: [],
          sys_is_ba: [],
          sys_is_pc: [],
          sys_is_pwd: [],
          sys_is_yun: [],
          sys_acc_type: [],
          sys_xt: [],
          sys_zjj: [],
          sys_db: [],
          sys_app: [],
          sys_status: [],
          sys_info_type: [],
          sys_info_person: [],
          sys_org_type: [],
          sys_jf_addr: []
        }
      },
      // 展开行键
      expandRowKeys: [],
      middlewareItems: [{ type: '', version: '' }],
      databaseItems: [{ type: '', version: '' }],
      appItems: [{ type: '', version: '' }],
      osItems: [{
        type: '',
        version: ''
      }],
      // 详情对话框
      detailOpen: false,
      // 详情表单
      detailForm: {},
      isDetail: false, // 添加标识是否为详情模式
      // Add isCollapse property
      isCollapse: true,
      dictLoaded: false, // 字典加载完成标志
    };
  },
  created() {
    this.getList();
    this.getDeptList();
    this.getDict();
  },
  methods: {
    /** 获取部署位置标签 */
    getDeployLocationLabel(value) {
      if (!this.dict.type.sys_jf_addr || !value) {
        return value;
      }
      const item = this.dict.type.sys_jf_addr.find(d => d.dictValue === value);
      return item ? item.dictLabel : value;
    },
    /** 查询部门列表 */
    getDeptList() {
      listDept().then(response => {
        this.deptOptions = response.data;
        // 处理部门数据，生成带有层级关系的选项
        this.deptTreeOptions = this.handleDeptOptions(this.deptOptions);
      });
    },
    /** 处理部门数据，生成带有层级关系的选项 */
    handleDeptOptions(depts) {
      // 构建部门映射表
      const deptMap = {};
      depts.forEach(dept => {
        deptMap[dept.deptId] = dept;
      });

      // 生成层级选项
      const options = [];
      depts.forEach(dept => {
        let fullName = dept.deptName;
        let parentId = dept.parentId;

        // 向上查找父部门
        while (parentId !== 0 && deptMap[parentId]) {
          const parent = deptMap[parentId];
          fullName = parent.deptName + '/' + fullName;
          parentId = parent.parentId;
        }

        options.push({
          deptId: dept.deptId,
          label: fullName,
          value: dept.deptId
        });
      });

      // 按照部门的层级路径排序
      //   options.sort((a, b) => a.label.localeCompare(b.label));

      return options;
    },
    /** 查询资产信息列表 */
    getList() {
      this.loading = true;
      this.expandRowKeys = []; // 重置展开行
      listAsset(this.queryParams).then(response => {
        this.assetList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取关联信息列表 */
    getGxList(row) {
      // 如果已经在加载中，不重复加载
      if (row.gxLoading) {
        return;
      }
      this.$set(row, 'gxLoading', true);
      listGx({ assetId: row.assetId }).then(response => {
        const gxList = Array.isArray(response) ? response : [response];
        this.$set(row, 'gxList', gxList);
        // 如果有数据，保持展开状态
        if (gxList && gxList.length > 0 && !this.expandRowKeys.includes(row.assetId)) {
          this.expandRowKeys.push(row.assetId);
        }
      }).catch(error => {
        console.error('获取关联信息失败:', error);
        this.$set(row, 'gxList', []);
        this.$modal.msgError('获取关联信息失败');
      }).finally(() => {
        this.$set(row, 'gxLoading', false);
      });
    },
    /** 处理展开行事件 */
    handleExpandChange(row, expandedRows) {
      const index = this.expandRowKeys.indexOf(row.assetId);
      if (expandedRows.includes(row)) {
        // 展开操作
        if (index === -1) {
          this.expandRowKeys.push(row.assetId);
        }
        if (!row.gxList) {
          this.getGxList(row);
        }
      } else {
        // 收起操作
        if (index !== -1) {
          this.expandRowKeys.splice(index, 1);
        }
      }
    },
    /** 查询字典数据 */
    getDict() {
      // 等待所有字典加载完毕
      Promise.all([
        getDicts("dept_type").then(res => { this.dict.type.dept_type = res.data }),
        getDicts("sys_type").then(res => { this.dict.type.sys_type = res.data }),
        getDicts("sys_is_dj").then(res => { this.dict.type.sys_is_dj = res.data }),
        getDicts("sys_level").then(res => { this.dict.type.sys_level = res.data }),
        getDicts("sys_sc_level").then(res => { this.dict.type.sys_sc_level = res.data }),
        getDicts("sys_fw_level").then(res => { this.dict.type.sys_fw_level = res.data }),
        getDicts("sys_is_ba").then(res => { this.dict.type.sys_is_ba = res.data }),
        getDicts("sys_is_pc").then(res => { this.dict.type.sys_is_pc = res.data }),
        getDicts("sys_is_pwd").then(res => { this.dict.type.sys_is_pwd = res.data }),
        getDicts("sys_is_yun").then(res => { this.dict.type.sys_is_yun = res.data }),
        getDicts("sys_acc_type").then(res => { this.dict.type.sys_acc_type = res.data }),
        getDicts("sys_xt").then(res => { this.dict.type.sys_xt = res.data }),
        getDicts("sys_zjj").then(res => { this.dict.type.sys_zjj = res.data }),
        getDicts("sys_db").then(res => { this.dict.type.sys_db = res.data }),
        getDicts("sys_app").then(res => { this.dict.type.sys_app = res.data }),
        getDicts("sys_status").then(res => { this.dict.type.sys_status = res.data }),
        getDicts("sys_info_type").then(res => { this.dict.type.sys_info_type = res.data }),
        getDicts("sys_info_person").then(res => { this.dict.type.sys_info_person = res.data }),
        getDicts("sys_org_type").then(res => { this.dict.type.sys_org_type = res.data }),
        getDicts("sys_jf_addr").then(res => { this.dict.type.sys_jf_addr = res.data })
      ]).then(() => {
        this.dictLoaded = true;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.isDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.showHostInfo = false;
      this.isDetail = false;
      this.middlewareItems = [{type: '', version: ''}];
      this.databaseItems = [{type: '', version: ''}];
      this.appItems = [{type: '', version: ''}];
      this.osItems = [{
        type: '',
        version: ''
      }];

      // 获取"否"的值
      const noOption = this.dict.type.sys_info_person?.find(item => item.dictLabel === '否');
      // 获取"是否定级"的"否"值
      const noClassifiedOption = this.dict.type.sys_is_dj?.find(item => item.dictLabel === '否');
      // 获取"是否已测评"的"否"值
      const noEvaluatedOption = this.dict.type.sys_is_pc?.find(item => item.dictLabel === '否');
      // 获取"是否已开展商用密码应用安全性评估"的"否"值
      const noSecurityEvaluatedOption = this.dict.type.sys_is_pwd?.find(item => item.dictLabel === '否');

      this.form = {
        ...this.form,
        osItems: [{type: '', version: ''}],
        middlewareItems: [{type: '', version: ''}],
        databaseItems: [{type: '', version: ''}],
        appItems: [{type: '', version: ''}],
        assetId: null,
        orgId: null,
        orgType: null,
        systemName: null,
        systemType: null,
        infoType: [],
        infoperson: Number(noOption?.dictValue || 0),
        personinfocount: 0,
        isClassified: Number(noClassifiedOption?.dictValue || 0), // 默认为"否"
        systemLevel: null,
        businessSecurityLevel: null,
        serviceSecurityLevel: null,
        isFiled: null,
        filingNumber: null,
        isEvaluated: Number(noEvaluatedOption?.dictValue || 0), // 默认为"否"
        lastEvaluateTime: null,
        gnjj: null,
        isSecurityEvaluated: Number(noSecurityEvaluatedOption?.dictValue || 0), // 默认为"否"
        lastSecurityEvaluateTime: null,
        deployLocation: null,
        machineRoomAddress: null,
        machineRoomManager: null,
        osType: null,
        osVersion: null,
        middlewareType: null,
        middlewareVersion: null,
        databaseType: null,
        databaseVersion: null,
        appProduct: null,
        appVersion: null,
        contactPerson: null,
        officePhone: null,
        mobilePhone: null,
        developCompany: null,
        maintainCompany: null,
        businessManager: null,
        userCount: null,
        isCloudEvaluated: null,
        status: "0",
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        cpjl: null,
        sysAssetGx: [{
          accessMethod: '',
          accessDomain: '',
          accessIp: '',
          localPort: '',
          publicMappedPort: '',
          serverIp: '',
          isActive: '1'
        }],
        appcpu: null,
        appdisksize: null,
        appnsize: null,
        dbcpu: null,
        dbdisksize: null,
        dbnsize: null,
      };
      this.resetForm("form");
      // 强制更新视图，确保禁用状态立即生效
      this.$forceUpdate();
    },
    /** 添加操作系统项 */
    addOsItem() {
      this.form.osItems.push({type: '', version: ''});
    },
    /** 删除操作系统项 */
    removeOsItem(index) {
      this.form.osItems.splice(index, 1);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.assetId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (!this.dictLoaded) {
        this.$message.warning("字典数据加载中，请稍后再试！");
        return;
      }
      this.reset();
      this.showHostInfo = false;
      this.isDetail = false;
      this.open = true;
      this.title = "添加资产信息";
      // 设置默认值，确保字典数据已加载
      this.$nextTick(() => {
        // 获取"是否定级"的"否"值
        const noClassifiedOption = this.dict.type.sys_is_dj?.find(item => item.dictLabel === '否');
        this.form.isClassified = Number(noClassifiedOption?.dictValue || 0); // 默认为"否"
        
        // 获取"是否已测评"的"否"值
        const noEvaluatedOption = this.dict.type.sys_is_pc?.find(item => item.dictLabel === '否');
        this.form.isEvaluated = Number(noEvaluatedOption?.dictValue || 0); // 默认为"否"
        
        // 获取"是否已开展商用密码应用安全性评估"的"否"值
        const noSecurityEvaluatedOption = this.dict.type.sys_is_pwd?.find(item => item.dictLabel === '否');
        this.form.isSecurityEvaluated = Number(noSecurityEvaluatedOption?.dictValue || 0); // 默认为"否"
        
        // 强制更新视图，确保禁用状态立即生效
        this.$forceUpdate();
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!this.dictLoaded) {
        this.$message.warning("字典数据加载中，请稍后再试！");
        return;
      }
      this.reset();
      const assetId = row.assetId || this.ids;
      this.isDetail = false;
      this.open = true;
      this.title = "修改资产信息";
      getAsset(assetId).then(response => {
        // 先保留原始form
        const data = response.data;
        // 处理中间件数据回显
        if (data.middlewareType && data.middlewareVersion) {
          const types = data.middlewareType.split(',');
          const versions = data.middlewareVersion.split(',');
          data.middlewareItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.middlewareItems = [{type: '', version: ''}];
        }
        // 处理数据库数据回显
        if (data.databaseType && data.databaseVersion) {
          const types = data.databaseType.split(',');
          const versions = data.databaseVersion.split(',');
          data.databaseItems = types.map((type, index) => ({
            type: String(type), // 强制转为字符串，确保和字典一致
            version: versions[index] || ''
          }));
        } else {
          data.databaseItems = [{type: '', version: ''}];
        }
        // 处理应用软件数据回显
        if (data.appProduct && data.appVersion) {
          const types = data.appProduct.split(',');
          const versions = data.appVersion.split(',');
          data.appItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.appItems = [{type: '', version: ''}];
        }
        // 处理操作系统数据回显
        if (data.osType && data.osVersion) {
          const types = data.osType.split(',');
          const versions = data.osVersion.split(',');
          data.osItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.osItems = [{type: '', version: ''}];
        }
        // 处理主机信息
        if (data.sysAssetGx && data.sysAssetGx.length > 0) {
          data.sysAssetGx = data.sysAssetGx.map(item => ({
            ...item,
            isActive: item.isActive ? item.isActive.toString() : '1'
          }));
          this.$nextTick(() => {
            this.showHostInfo = true;
          });
        } else {
          data.sysAssetGx = [{
            accessMethod: '',
            accessDomain: '',
            accessIp: '',
            localPort: '',
            publicMappedPort: '',
            serverIp: '',
            isActive: '1'
          }];
          this.showHostInfo = false;
        }
        // 信息类别多选回显
        if (typeof data.infoType === 'string') {
          data.infoType = data.infoType ? data.infoType.split(',') : [];
        }
        // infoperson 回显为数值
        if (data.infoperson !== null && data.infoperson !== undefined) {
          data.infoperson = Number(data.infoperson);
        }
        // isClassified、isEvaluated、isSecurityEvaluated 回显为数值
        if (data.isClassified !== null && data.isClassified !== undefined) {
          data.isClassified = Number(data.isClassified);
        }
        if (data.isEvaluated !== null && data.isEvaluated !== undefined) {
          data.isEvaluated = Number(data.isEvaluated);
        }
        if (data.isSecurityEvaluated !== null && data.isSecurityEvaluated !== undefined) {
          data.isSecurityEvaluated = Number(data.isSecurityEvaluated);
        }
        this.form = data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 处理中间件数据
          const middlewareTypes = this.form.middlewareItems.map(item => item.type).filter(Boolean).join(',');
          const middlewareVersions = this.form.middlewareItems.map(item => item.version).filter(Boolean).join(',');
          // 处理数据库数据
          const databaseTypes = this.form.databaseItems.map(item => String(item.type)).filter(Boolean).join(',');
          const databaseVersions = this.form.databaseItems.map(item => item.version).filter(Boolean).join(',');
          // 处理应用软件数据
          const appTypes = this.form.appItems.map(item => item.type).filter(Boolean).join(',');
          const appVersions = this.form.appItems.map(item => item.version).filter(Boolean).join(',');
          // 处理操作系统数据
          const osTypes = this.form.osItems.map(item => item.type).filter(Boolean).join(',');
          const osVersions = this.form.osItems.map(item => item.version).filter(Boolean).join(',');
          this.form.middlewareType = middlewareTypes;
          this.form.middlewareVersion = middlewareVersions;
          this.form.databaseType = databaseTypes;
          this.form.databaseVersion = databaseVersions;
          this.form.appProduct = appTypes;
          this.form.appVersion = appVersions;
          this.form.osType = osTypes;
          this.form.osVersion = osVersions;
          // 信息类别多选提交处理
          if (Array.isArray(this.form.infoType)) {
            this.form.infoType = this.form.infoType.join(',');
          }
          // 个人信息相关字段转为 int/null
          if (this.form.infoperson !== null && this.form.infoperson !== undefined && this.form.infoperson !== '') {
            this.form.infoperson = parseInt(this.form.infoperson, 10);
          } else {
            this.form.infoperson = null;
          }
          if (this.form.personinfocount !== null && this.form.personinfocount !== undefined && this.form.personinfocount !== '') {
            this.form.personinfocount = parseInt(this.form.personinfocount, 10);
          } else {
            this.form.personinfocount = null;
          }
          if (this.form.assetId != null) {
            updateAsset(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAsset(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const assetIds = row.assetId || this.ids;
      this.$modal.confirm('是否确认删除资产信息编号为"' + assetIds + '"的数据项？').then(function () {
        return delAsset(assetIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.ids.length > 0) {
        // 有选中数据，直接导出选中数据
        this.download('admin/asset/export', {
          ...this.queryParams,
          assetIds: this.ids.join(',')
        }, `asset_${new Date().getTime()}.xlsx`);
      } else {
        // 没有选中数据，提示是否导出全部
        this.$modal.confirm('是否确认导出全部资产数据？').then(() => {
          this.download('admin/asset/export', {
            ...this.queryParams
          }, `asset_${new Date().getTime()}.xlsx`);
        }).catch(() => {
        });
      }
    },
    /** 导入按钮操作 */
    handleImport() {
      this.$refs.upload.click();
    },
    /** 处理文件上传 */
    handleFileUpload(e) {
      const files = e.target.files;
      if (files.length === 0) {
        return;
      }
      const file = files[0];
      const formData = new FormData();
      formData.append('file', file);

      this.$modal.confirm('是否确认导入资产数据？').then(() => {
        importData(formData).then(response => {
          this.$modal.msgSuccess("导入成功");
          this.getList();
        }).catch(() => {
          this.$modal.msgError("导入失败");
        });
      }).catch(() => {
      });

      // 清空文件选择，以便可以重复选择同一文件
      e.target.value = '';
    },
    /** 下载模板操作 */
    handleImportTemplate() {
      window.location.href = process.env.VUE_APP_BASE_API + '/admin/asset/importTemplate';
    },
    /** 新增主机信息项 */
    addHostItem() {
      this.form.sysAssetGx.push({
        accessMethod: '',
        accessDomain: '',
        accessIp: '',
        localPort: '',
        publicMappedPort: '',
        serverIp: '',
        isActive: '1'
      });
    },
    /** 删除主机信息项 */
    removeHostItem(index) {
      this.form.sysAssetGx.splice(index, 1);
    },
    /** 添加中间件项 */
    addMiddlewareItem() {
      this.form.middlewareItems.push({type: '', version: ''});
    },
    /** 删除中间件项 */
    removeMiddlewareItem(index) {
      this.form.middlewareItems.splice(index, 1);
    },
    /** 添加数据库项 */
    addDatabaseItem() {
      this.form.databaseItems.push({type: '', version: ''});
    },
    /** 删除数据库项 */
    removeDatabaseItem(index) {
      this.form.databaseItems.splice(index, 1);
    },
    /** 添加应用软件项 */
    addAppItem() {
      this.form.appItems.push({type: '', version: ''});
    },
    /** 删除应用软件项 */
    removeAppItem(index) {
      this.form.appItems.splice(index, 1);
    },
    /** 查看详情按钮操作 */
    handleDetail(row) {
      this.reset();
      const assetId = row.assetId;
      this.isDetail = true;
      this.open = true;
      this.title = "查看资产信息";
      getAsset(assetId).then(response => {
        const data = response.data;
        // 处理中间件数据回显
        if (data.middlewareType && data.middlewareVersion) {
          const types = data.middlewareType.split(',');
          const versions = data.middlewareVersion.split(',');
          data.middlewareItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.middlewareItems = [{type: '', version: ''}];
        }
        // 处理数据库数据回显
        if (data.databaseType && data.databaseVersion) {
          const types = data.databaseType.split(',');
          const versions = data.databaseVersion.split(',');
          data.databaseItems = types.map((type, index) => ({
            type: String(type), // 强制转为字符串，确保和字典一致
            version: versions[index] || ''
          }));
        } else {
          data.databaseItems = [{type: '', version: ''}];
        }
        // 处理应用软件数据回显
        if (data.appProduct && data.appVersion) {
          const types = data.appProduct.split(',');
          const versions = data.appVersion.split(',');
          data.appItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.appItems = [{type: '', version: ''}];
        }
        // 处理操作系统数据回显
        if (data.osType && data.osVersion) {
          const types = data.osType.split(',');
          const versions = data.osVersion.split(',');
          data.osItems = types.map((type, index) => ({
            type: type,
            version: versions[index] || ''
          }));
        } else {
          data.osItems = [{type: '', version: ''}];
        }
        if (data.sysAssetGx && data.sysAssetGx.length > 0) {
          this.$nextTick(() => {
            this.showHostInfo = true;
          });
        }
        if (typeof data.infoType === 'string') {
          data.infoType = data.infoType ? data.infoType.split(',') : [];
        }
        if (data.infoperson !== null && data.infoperson !== undefined) {
          data.infoperson = Number(data.infoperson);
        }
        if (typeof data.personinfocount === 'string' && data.personinfocount !== '') {
          data.personinfocount = parseInt(data.personinfocount, 10);
        } else if (data.personinfocount === '' || data.personinfocount === undefined) {
          data.personinfocount = null;
        }
        // isClassified、isEvaluated、isSecurityEvaluated 回显为数值
        if (data.isClassified !== null && data.isClassified !== undefined) {
          data.isClassified = Number(data.isClassified);
        }
        if (data.isEvaluated !== null && data.isEvaluated !== undefined) {
          data.isEvaluated = Number(data.isEvaluated);
        }
        if (data.isSecurityEvaluated !== null && data.isSecurityEvaluated !== undefined) {
          data.isSecurityEvaluated = Number(data.isSecurityEvaluated);
        }
        this.form = data;
      });
    },
    /** 系统中是否包含个人信息变化时的处理 */
    handleInfoPersonChange(value) {
      // 只控制可编辑状态，不清空内容
    },
    /** 获取字典标签 */
    getDictLabel(dict, value) {
      if (!dict || !value) return '';
      const item = dict.find(d => String(d.dictValue) === String(value));
      return item ? item.dictLabel : value;
    },
    /** 获取多个字典标签 */
    getMultipleDictLabel(dict, values) {
      if (!dict || !values) return '';
      // 确保values是数组
      const valueArray = typeof values === 'string' ? values.split(',').map(v => v.trim()) : values;
      return valueArray
        .map(value => {
          const item = dict.find(d => String(d.dictValue) === String(value));
          return item ? item.dictLabel : value;
        })
        .filter(Boolean)
        .join('，'); // 使用中文逗号分隔，更符合中文阅读习惯
    },
    /** 获取多个字典标签（带版本） */
    getMultipleDictLabelWithVersion(dict, values, versions) {
      if (!dict || !values) return '';
      // 确保values和versions都是数组
      const valueArray = typeof values === 'string' ? values.split(',').map(v => v.trim()) : values;
      const versionArray = typeof versions === 'string' ? versions.split(',').map(v => v.trim()) : versions;

      return valueArray
        .map((value, index) => {
          const item = dict.find(d => String(d.dictValue) === String(value));
          const version = versionArray[index] || '';
          return item ? `${item.dictLabel}${version ? ` (${version})` : ''}` : value;
        })
        .filter(Boolean)
        .join('，'); // 使用中文逗号分隔，更符合中文阅读习惯
    },
    // Add toggleCollapse method
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 监听是否定级变化
    'form.isClassified'(newVal) {
      if (newVal === 2) {
        // 如果选择"否"，清空相关字段
        this.form.systemLevel = null;
        this.form.businessSecurityLevel = null;
        this.form.serviceSecurityLevel = null;
        this.form.isFiled = null;
        this.form.filingNumber = null;
      }
    },
    // 监听是否已测评变化
    'form.isEvaluated'(newVal) {
      if (newVal === 2) {
        // 如果选择"否"，清空相关字段
        this.form.lastEvaluateTime = null;
        this.form.cpjl = null;
        this.form.isSecurityEvaluated = null;
        this.form.lastSecurityEvaluateTime = null;
      }
    },
    // 监听是否已开展商用密码应用安全性评估变化
    'form.isSecurityEvaluated'(newVal) {
      if (newVal !== 1) {
        // 如果不是"是"，清空最近密评时间
        this.form.lastSecurityEvaluateTime = null;
      }
    },
    // 监听系统中是否包含个人信息变化
    'form.infoperson'(newVal) {
      if (newVal !== 1) {
        // 如果不是"是"，清空相关字段
        this.form.infoType = [];
        this.form.personinfocount = 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .search-collapse {
    display: flex;
    flex-wrap: wrap;
    transition: all 0.3s;
    max-height: 68px;
    overflow: hidden;
  }

  .el-form {
    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  // 问号图标样式
  .custom-question-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    background-color: #909399;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
    
    &::before {
      content: "?";
    }
    
    &:hover {
      background-color: #409EFF;
    }
  }

  // 下拉选项样式
  .el-select-dropdown__item {
    .custom-question-icon {
      float: right;
      margin-top: 2px;
    }
  }

  // 选择框选项样式
  .select-option-label {
    display: inline-block;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 问号图标字符方案，兼容所有下拉和弹层 */
::v-deep .custom-question-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #909399;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 4px;
  cursor: help;
  font-weight: bold;
  line-height: 16px;
}
::v-deep .custom-question-icon::before {
  content: '?';
}

/* 操作按钮垂直排列样式 */
::v-deep .operation-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

::v-deep .operation-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  min-width: 60px;
}
</style>
